<template>
  <div class="container">
    <span class="iconfont header-back" v-show="this.level !== 0" @click="back">&#xe679;</span>
    <span class="header-title">{{this.title}}</span>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'THeader',
  methods: {
    back () {
      this.$router.go(-1)
      this.$store.dispatch('showHeadBack', -1)
    },
    routeStore (name) {
      if (name === 'Classic') {
        this.$store.dispatch('changeTab', '流行')
      } else if (name === 'Book') {
        this.$store.dispatch('changeTab', '书单')
      } else if (name === 'Music') {
        this.$store.dispatch('changeTab', '歌单')
      } else if (name === 'BookDetail') {
        this.$store.dispatch('changeTab', '书籍详情')
        this.$store.dispatch('showHeadBack', 1)
      }
    }
  },
  computed: {
    ...mapState(['title']),
    ...mapState(['level'])
  },
  watch: {
    $route (to, from) {
      this.routeStore(to.name)
    }
  },
  mounted () {
    this.routeStore(this.$route.name)
  }
}
</script>

<style lang="stylus" scoped>
  .container
    align-items: content
    position: fixed
    height: 1.16rem
    text-align: center
    width: 100%
    z-index: 99
    background-color: #fff
    top: 0
    text-align: content
    box-shadow: 0 0 1px 0 #e3e3e3
    .header-back
      font-size: .5rem
      position: absolute
      left: .2rem
      top: .35rem
    .header-title
      position: relative
      top: .45rem
      font-size: .35rem
</style>
